<script>
import * as echarts from 'echarts'
import BaseChartVue from '@/components/BaseChart.vue'
import { hexToRgba, arrayGroupBy } from '@/lib/utils'
let len = 0
export default {
    name: 'percentPie',
    components: {},
    extends: BaseChartVue,
    props: {
        colorArr: {
            type: String,
            default: 'rgba(227,67,43',
        },
        dataList: {
            type: Array,
            default: () => [26.43],
        },
        titleText: {
            type: String,
            default: '',
        },
        bgColor: {
            type: String,
            default: '#dbfbf6',
        }
    },
    data() {
        return {
            time: null,
        }
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    beforeDestroy() {
        // 清除定时器
        // this.stopShowTip()
    },
    methods: {
        makeOptions() {
            let data = [
                {
                    name: '',
                    value: this.dataList[0] ? this.dataList[0] > 100 ? 100 : this.dataList[0] : 0,
                },
            ]
            let sumValue = 100
            let total = this.dataList[0] || 0
            let optionData = {
                series: [],
                yAxis: [],
            }
            data.map(item => {
                optionData.series.push({
                    name: '',
                    type: 'pie',
                    clockWise: true,
                    z: 2,
                    hoverAnimation: false,
                    radius: ['82%', '94%'],
                    center: ['50%', '50%'],
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                    data: [
                        {
                            value: item.value,
                            name: item.name,
                        },
                        {
                            value: sumValue - item.value,
                            name: '',
                            itemStyle: {
                                color: 'rgba(0,0,0,0)',
                                borderWidth: 0,
                            },
                            tooltip: {
                                show: false,
                            },
                            label: {
                                show: false,
                            },
                            hoverAnimation: false,
                        },
                    ],
                })
                optionData.series.push({
                    name: '背景线',
                    type: 'pie',
                    silent: true,
                    z: 1,
                    clockWise: true,
                    hoverAnimation: false,
                    radius: ['80%', '90%'],
                    center: ['50%', '50%'],
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        borderWidth: 3,
                    },
                    data: [
                        {
                            value: 100,
                            itemStyle: {
                                color: this.bgColor,
                                borderWidth: 0,
                            },
                            tooltip: {
                                show: false,
                            },
                            hoverAnimation: false,
                        },
                    ],
                })
                optionData.yAxis.push(item.name)
            })
            let option = {
                title: [{
                    show: true,
                    text: total + '%',
                    top: '50%',
                    left: '48%',
                    textAlign: 'center',
                    textStyle: {
                        color: '#333',
                        fontSize: 18,
                        fontWeight: 'bold',
                        // lineHeight: 60,
                    },
                    ...this.title,
                }, {
                    show: true,
                    text: this.titleText,
                    top: '35%',
                    left: '48%',
                    textAlign: 'center',
                    textStyle: {
                        color: '#333',
                        fontSize: '12',
                        fontWeight: 'bold',
                    },
                    ...this.title,
                }],
                color: [
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: this.colorArr + ',1)',
                            },
                            {
                                offset: 1,
                                color: this.colorArr + ',1)',
                            },
                        ],
                        global: false,
                    },
                ],
                grid: {
                    top: '0%',
                    bottom: '0%',
                    left: '0%',
                    containLabel: false,
                },
                yAxis: [
                    {
                        type: 'category',
                        inverse: true,
                        z: 3,
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        data: optionData.yAxis,
                    },
                ],
                xAxis: [
                    {
                        show: false,
                    },
                ],
                series: optionData.series,
            }
            return option
        }
    },
}
</script>
